<template>
  <div>
    <div class="page1-top" :style="{backgroundImage: 'url('+bannerUrl+')'}"></div>
    <div class="featureList-swiper-ct ani" swiper-animate-effect="zoomIn" swiper-animate-duration=".3s" swiper-animate-delay=".3s">
      <swiper class="featureList-swiper" :options="shareholderSwiperOption">
        <swiper-slide v-for="(item,index) in featureList" :key="index">
          <div class="featureList-info">
            <div class="featureList-logo">
              <img :src="item.img">
            </div>
            <div class="text-area">
              <p class="name">{{item.title}}</p>
              <p class="desc">{{item.intro}}</p>
            </div>
          </div>
        </swiper-slide>
      </swiper>
      <div class="btn2 prev-btn2">
        <i class="iconfont icon-back"></i>
      </div>
      <div class="btn2 next-btn2">
        <i class="iconfont icon-more"></i>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        shareholderSwiperOption: {
          navigation: {
            nextEl: '.next-btn2',
            prevEl: '.prev-btn2'
          }
        },
      }
    },
    props: {
      bannerUrl: {
        type: String,
        default () {
          return ''
        }
      },
      featureList: {
        type: Array,
        default () {
          return []
        }
      }
    },
    methods: {
    },
    components: {},
    created () {
    }
  }
</script>

<style lang="scss" scoped>
  .page1-top {
  	position: relative;
  	height: rem(410);
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
  	&::after {
  		position: absolute;
  		content: '';
  		width: 100%;
  		height: 100%;
  		left: 0;
  		top: 0;
  		background-color: rgba(0, 0, 0, 0.3);
  	}
  }
  .featureList-swiper-ct {
  	position: relative;
  	margin-top: rem(124);
  	.featureList-swiper {
  		.featureList-info {
  			height: 100%;
  			.featureList-logo {
  				display: flex;
  				justify-content: center;
  				align-items: center;
  				height: rem(250);
  				img {
  					height: rem(130);
  				}
  			}
  			.text-area {
  				margin: 0 rem(92);
  				.name {
  					font-size: rem(44);
  					color: #ca3832;
            line-height: rem(46);
            text-align: center;
  					padding-bottom: rem(20);
  					border-bottom: 1px solid #333;
  				}
  				.desc {
  					padding-top: rem(13);
  					line-height: rem(46);
  					font-size: rem(30);
  					color: #666;
  				}
  			}
  		}
  	}
  	.btn2 {
  		position: absolute;
  		z-index: 10;
  		top: rem(200);
  		display: block;
  		width: rem(51);
  		height: rem(51);
  		text-align: center;
  		line-height: rem(51);
  		color: #afafaf;
  		outline: none;
  		&.swiper-button-disabled {
  			opacity: 0.5;
  		}
  		&.prev-btn2 {
  			left: rem(6);
  		}
  		&.next-btn2 {
  			right: rem(16);
  		}
  		.iconfont {
  			font-size: rem(70);
  			outline: none;
  		}
  	}
  }
</style>
